<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>boot-project 登录</title>
  <link rel="icon" th:href="@{/static/favicon.ico}" type="image/x-icon">
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link rel="stylesheet" th:href="@{/static/lib/bootstrap/bootstrap.min.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/fontawesome-free/css/all.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/validate/validate.css}"/>
  <link rel="stylesheet" th:href="@{/static/lib/iCheck/square/blue.css}"/>
  <link rel="stylesheet" th:href="@{/static/css/login.css}"/>

</head>
<body>
<header id="header">
</header>
<div class="main-content login-content">
  <div class="login-bg-container"></div>
  <div class="login-box-container">
    <div class="login-box">
      <form id="loginForm" class="login-form">
        <div class="login-title">欢迎使用BOOT-PROJECT</div>
        <div class="form-group has-feedback">
          <input type="text" name="username" class="form-control" placeholder="请输入用户名" max="14" min="3" require="必填项">
          <span class="fas fa-user form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback">
          <input name="password" type="password" class="form-control" placeholder="请输入密码" require="必填项"
                 nochinese="密码不能包括中文">
          <span class="fas fa-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-feedback vcode">
          <div class="vcode-content">
            <input type="text" name="verification" class="form-control vcode-input" placeholder="验证码" require="必填项"
                   data-position="position-a">
            <span class="fas fa-key vcode-icon form-control-feedback"></span>
          </div>
          <img class="pointer vcode-img">
        </div>
        <div class="row">
          <div class="col-xs-8">
            <div class="checkbox icheck">
              <label style="padding: 0">
                <input type="checkbox" id="rememberMe" name="rememberMe" checked value="1"> 记住密码
              </label>
            </div>
          </div>
        </div>
        <button id="loginBtn" type="button" class="btn-login">登录</button>
      </form>
    </div>
  </div>


</div>
<script th:src="@{/static/lib/jquery/jquery.min.js}"></script>
<script th:src="@{/static/lib/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/static/lib/layer/layer.js}"></script>
<script th:src="@{/static/lib/validate/validate.js}"></script>
<script th:src="@{/static/lib/iCheck/icheck.min.js}"></script>
<script th:inline="javascript">
  var ctx = [[@{/}]];
</script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' // optional
    });

  });
</script>
<script>
  $(function () {
    $(".vcode-img").on('click', function () {
//            var url = '/Creditgt.jpg?d='+Math.random();
//            $(this).attr('src',url);
      $(this).attr('src', (ctx + '/verificationCode?').replace('//', '/') + Math.floor(Math.random() * 100));
    });
    $("#loginBtn").on('click', function () {
      if (!doValidForm('#loginForm')) {
        //没有通过验证
        return;
      }
      $.ajax({
        type: "POST",
        url: (ctx + "/auth/login").replace('//', '/'),
        data: $(".login-form").serialize(),
        dataType: "json",
        success: function (data) {
          if (data.code === 1) {
            layer.msg('登录成功', {
              offset: '30%',
              time: 800
            }, function () {
              window.location.href = (ctx + "/admin").replace('//', '/');
            });
          } else {
            layer.msg(data.message, {
              icon: 2,
              offset: '30%',
              time: 2000
            });
            $(".vcode-img").click();
          }
        }
      });
    });

    $(document).keyup(function (event) {
      if (event.keyCode == 13) {
        $("#loginBtn").click();
      }
    });
  })

  window.onload = function () {
    var new_scroll_position = 0;
    var last_scroll_position;
    var header = document.getElementById("header");
    window.addEventListener('scroll', function (e) {
      last_scroll_position = window.scrollY;
      if (new_scroll_position < last_scroll_position && last_scroll_position > 55) {
        header.classList.remove("slideDown");
        header.classList.add("slideUp");

      } else if (new_scroll_position > last_scroll_position) {
        header.classList.remove("slideUp");
        header.classList.add("slideDown");
      }
      new_scroll_position = last_scroll_position;
    });
    $(".vcode-img").click();

  }

</script>
</body>
</html>